import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Login } from "actions/common";
import { pwdLogin } from "actions/login";
import { isOverflow } from "app/utils";
import AxHeader from "components/AxHeader";
import AxFooter from "components/Footer";
import s from "./index.scss";
import { Flex , Toast} from "antd-mobile";
import phonePng from "assets/images/phone.png";
import yzm2Png from "assets/images/yzm2.png";
import Icon from "antd/lib/Icon";
import md5 from "app/utils/md5"
import {callApi} from "app/utils";


@connect(
  state => ({
    common: state.common,
    login: state.login,
  }),
  {
    Login,
    pwdLogin
  }
)
export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { 
      phone: "",
      sms: "",
      tipStr:"获取短信验证码",
      isSend:false,
      sendStr:'重新发送(60)秒',
      timer:null,
      time:5,
   };
   this.handelPhone = this.handelPhone.bind(this)
   this.handelSms = this.handelSms.bind(this)
   this.submitLogin = this.submitLogin.bind(this)
   this.clearValue = this.clearValue.bind(this)
   this.sendSms = this.sendSms.bind(this)
  }

handelPhone(event) {
    this.setState({phone:event.target.value})
}
handelSms(event) {
  this.setState({sms:event.target.value})
}
sendSms(){
  if(this.state.phone == ""){
    Toast.info('请填写手机号码', 1);
    return false;
}
if(!(/^1\d{10}$/.test(this.state.phone))) {
    Toast.info('手机号格式不正确', 1);
    return false;
}
  this.setState({
    isSend:true
  })
  var getMessageCodeSubmitData={mobile : this.state.phone, verifyType : '1'};
  callApi('/common/smscode/send',getMessageCodeSubmitData,"POST").then((data)=>{
    console.log(data)
  })

  this.state.timer = setInterval(()=>{
    this.state.time--
    if(this.state.time==0){
      clearInterval( this.state.timer )
      this.setState({
        isSend:false,
        time:5,
      })
    }
    this.setState({
      sendStr:`重新发送(${this.state.time})秒`,
    })
   
  },1000)
}

clearValue(e){
  if(e=='phone'){
    this.setState({phone:''})
  }
}

submitLogin(){
    var { pwdLogin } = this.props;
    
    if(this.state.phone == ""){
        Toast.info('请填写手机号码', 1);
        return false;
    }
    if(!(/^1\d{10}$/.test(this.state.phone))) {
        Toast.info('手机号格式不正确', 1);
        return false;
    }
    if(this.state.sms=="") {
        Toast.info('请填写验证码', 1);
        return false;
    }
    var submitData={mobile : this.state.phone, smsCode : this.state.sms};
    pwdLogin(submitData,'/user/smslogin').then((data)=>{
      if(data.response.success==true){
        Toast.info('登录成功',1)
        this.props.router.push('/')
      }
    })
    
}

  componentDidMount() {
    let { Login } = this.props;

    if (this.props.common.isLogin == true) {
      isOverflow(false);
    } else {
      isOverflow(true);
    }
  }
  componentWillReceiveProps(nextProps) {
    // console.log(nextProps, "nextProps",this.props);
    // if(this.props.login.isLogin==nextProps.login.isLogin) return
    // if(nextProps.login.isLogin==true){
    //   Toast.info('登录成功', 1);
    // }else if(nextProps.login.isLogin==false){
    //   Toast.info('登录失败', 1);
    // }
  }

  render() {
    let { isLogin } = this.props.common;
    let { phone , sms } = this.state
    return (
      <div className={`${s.smsLoginBox}`}>
      <div>
        <AxHeader />
        <Flex direction="column" className={`${s.formBox}`}>
          <Flex.Item className={`${s.item}`}>
            <img className={`${s.rightImg}`} src={phonePng} />
            <input
              placeholder="请输入您的手机号"
              type="number"
              className={`${s.phone}`}
              value={phone}
              onChange={this.handelPhone}
            />
            <Icon className={`${s.closeCircle}`} type="cross" onClick={this.clearValue.bind(this,'phone')} />
          </Flex.Item>
          <Flex.Item className={`${s.item}`}>
            <Flex>
              <Flex.Item className={`${s.item} flex6`}>
              <img className={`${s.rightImg}`} src={yzm2Png} />
            <input
              placeholder="请输入验证码"
              type="number"
              className={`${s.sms}`}
              value={sms}
              onChange={this.handelSms}
            />
              </Flex.Item>
              <Flex.Item className={`${s.item} flex4`}>
                <div className={`${s.loginBtn}`} style={{fontSize:'0.12rem',marginLeft:'10%',display:this.state.isSend?'none':"block"}} onClick={this.sendSms}>{this.state.tipStr}</div>
                <div className={`${s.loginBtn}`} style={{fontSize:'0.12rem',marginLeft:'10%',display:this.state.isSend?'block':"none",backgroundColor:"rgba(70,161,251,.5)"}} >{this.state.sendStr}</div>
              </Flex.Item>
            </Flex>
            
          </Flex.Item>
         
          <Flex.Item className={`${s.item}`}>
            <div className={`${s.loginBtn}`} onClick={this.submitLogin}>登录</div>
          </Flex.Item>
          <Flex.Item className={`${s.item} ${s.row}`} style={{}}>
            <span className={`${s.redSpan}`}
              style={{height:'0.3rem',lineHeight:'0.3rem',display:"inline-block"}}
             onClick={()=>{
              this.props.router.push('/login')
            }}>账号密码登录</span>
          </Flex.Item>
        </Flex>
        </div>
        <AxFooter base={true} />
      </div>
    );
  }
}
